﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Document Title -->
    <title>Product Detail</title>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="assets/rs-plugin/css/settings.css" media="screen"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="assets/css2/ionicons.min.css">
    <link rel="stylesheet" href="assets/css2/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css2/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css2/main.css">
    <link rel="stylesheet" href="assets/css2/style.css">
    <link rel="stylesheet" href="assets/css2/responsive.css">
    <link rel="stylesheet" href="assets/button/MovieDetail.css">

    <!-- Fonts Online -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
          rel="stylesheet">

    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100' rel='stylesheet' type='text/css'>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min2.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min2.css"/>
    <!-- Custom CSS -->
    <link href="assets/css/style3.css" rel="stylesheet">

    <!-- JavaScripts -->
    <script src="assets/js/vendors/modernizr.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<style type="text/css">
    #comment {
        border: 1px solid #E4E4E4;
    }

    .comment-content {
        width: 700px;
    }

    .comment-buyer {
        width: 200px;
        text-align: center
    }
</style>
<body>

<!-- Page Wrapper -->
<div id="wrap" class="layout-1">
    <!-- Top bar -->
    <jsp:include page="header.jsp"></jsp:include>

    <!-- Content -->
    <div id="content">
        <!-- Products -->
        <section class="padding-top-40 padding-bottom-60">
            <div class="container">
                <div class="row">

                    <!-- Products -->
                    <div class="col-md-9">
                        <div class="product-detail">
                            <div class="product">

                                <!-- Slider Thumb -->
                                <div class="col-xs-5">
                                    <article class="slider-item on-nav">
                                        <div class="thumb-slider">
                                            <ul class="slides">
                                                <li data-thumb="images/item-img-1-3.jpg">
                                                    <c:choose>
                                                        <c:when test="${movie.picture eq null}">
                                                            <img src="assets/img_new/暂无海报.jpg" alt="">
                                                        </c:when>
                                                        <c:otherwise>
                                                            <img src="${pageContext.request.contextPath }/upload/${movie.picture}"
                                                                 alt="">
                                                        </c:otherwise>
                                                    </c:choose>
                                                </li>
                                            </ul>
                                        </div>
                                    </article>
                                </div>
                                <!-- Item Content -->
                                <div class="col-xs-7">
                      <span class="tags">
                          ${movie.type}
                      </span>
                                    <h5>${movie.name}</h5>

                                    <div class="row">
                                        <div class="col-sm-8"><span class="price">影片评分：
                        <c:choose>
                            <c:when test="${movie.score eq 0}">
                                暂无评分
                            </c:when>
                            <c:otherwise>
                                ${movie.score}
                            </c:otherwise>
                        </c:choose>
                        </span></div>
                                        <br>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-11">
                                            <p>导演: <span class="in-stock">${movie.director}</span></p>
                                            <p>演员: <span class="in-stock">${movie.actor}</span></p>
                                            <p>制片国家/地区: <span class="in-stock">${movie.production_area}</span></p>
                                            <p>语言: <span class="in-stock">${movie.language}</span></p>
                                            <p>上映日期: <span class="in-stock"><fmt:formatDate
                                                    value="${movie.release_time}" type="date"
                                                    pattern="yyyy-MM-dd"/> </span></p>
                                            <p>片长: <span class="in-stock"> ${movie.length}</span></p>
                                            <p>影片简介：</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 text">
                                            <p>${movie.content}</p>
                                        </div>
                                        <span>
							<a href="${pageContext.request.contextPath }/memberMovie?method=doEvaluation&id=${movie.id}"
                               class="button button-pill button">发表影片评价</a>
							<a href="${pageContext.request.contextPath }/memberMovie?method=doReview&id=${movie.id}"
                               class="button button-pill button">发表影评文章</a>
						</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- Details Tab Section-->
                <div class="item-tabs-sec">

                    <!-- Nav tabs -->
                    <ul class="nav" role="tablist">

                        <li role="presentation" class="active"><a href="#evaluation" role="tab"
                                                                  data-toggle="tab">其他用户评价</a></li>
                        <li role="presentation" class=><a href="#reviewEssay" role="tab" data-toggle="tab">相关影评文章</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active fade in" id="evaluation">
                            <table id="comment">
                                <tr>
                                    <th class="comment-buyer" style="font-size:16px;text-align:center;">评论者：</th>
                                    <th class="comment-content" style="font-size:16px;">评价内容：</th>
                                    <th class="comment-buyer" style="font-size:16px;text-align:center;">评分：</th>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <hr style="width:100%; text-align:center; border:1px solid #E4E4E4"/>
                                    </td>
                                </tr>
                                <c:forEach var="evaluation" items="${evaluationList}">
                                    <tr>
                                        <td class="comment-buyer">${evaluation.author}</td>
                                        <td class="comment-content"><p>${evaluation.content}</p><br/>
                                            <span style="color:#808080 ">${evaluation.publish_time}</span>
                                        </td>
                                        <td class="comment-buyer">${evaluation.score}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <hr style="width:100%; text-align:center; border:1px solid #E4E4E4"/>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="reviewEssay">
                            <table id="comment">
                                <tr>
                                    <th class="comment-buyer" style="font-size:16px;text-align:center;">作者：</th>
                                    <th class="comment-content" style="font-size:16px;">文章链接：</th>
                                    <th class="comment-buyer" style="font-size:16px;text-align:center;">评分</th>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <hr style="width:100%; text-align:center; border:1px solid #E4E4E4"/>
                                    </td>
                                </tr>
                                <c:forEach var="reviewEssay" items="${reviewEssayList}">
                                    <tr>
                                        <td class="comment-buyer">${reviewEssay.author}</td>
                                        <td class="comment-content"><a
                                                href="${pageContext.request.contextPath }/memberMovie?method=viewReview&id=${reviewEssay.id}">
                                            <p>${reviewEssay.title}</p></a><br/>
                                            <span style="color:#808080 ">${reviewEssay.publish_time}</span>
                                        </td>
                                        <td class="comment-buyer">${reviewEssay.score}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <hr style="width:100%; text-align:center; border:1px solid #E4E4E4"/>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- End Content -->

    <!-- Begin Footer -->
    <jsp:include page="footer.jsp"></jsp:include>

    <!-- GO TO TOP  -->
    <a href="#" class="cd-top"><i class="fa fa-angle-up"></i></a>
    <!-- GO TO TOP End -->
</div>
<!-- End Page Wrapper -->

<script src="assets/js2/vendors/jquery/jquery.min.js"></script>
<script src="assets/js2/vendors/wow.min.js"></script>
<script src="assets/js2/vendors/bootstrap.min.js"></script>
<script src="assets/js2/vendors/own-menu.js"></script>
<script src="assets/js2/vendors/jquery.sticky.js"></script>
<script src="assets/js2/vendors/owl.carousel.min.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript" src="assets/rs-plugin/js/jquery.tp.t.min.js"></script>
<script type="text/javascript" src="assets/rs-plugin/js/jquery.tp.min.js"></script>
<script src="assets/js2/main.js"></script>

<script src="assets/js/vendor/jquery-1.12.0.min.js"></script>
<!-- bootstrap js -->
<%--<script src="assets/js/bootstrap.min.js"></script>--%>
<!-- owl.carousel js -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- meanmenu js -->
<script src="assets/js/jquery.meanmenu.js"></script>
<!-- countdown js -->
<script src="assets/js/countdown.js"></script>
<!-- jquery.nivo.slider.pack js -->
<script src="assets/js/jquery.nivo.slider.pack.js"></script>
<!-- jquery-ui.min.js -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="assets/js/wow.min.js"></script>
<!-- plugins js -->
<script src="assets/js/plugins.js"></script>
<!-- main js -->
<script src="assets/js/main2.js"></script>
</body>
</html>